<template>
  <div class="material-read">
    <div class="header">
      <div class="header-left">
        <el-checkbox
          :model-value="isAllChecked"
          :indeterminate="isIndeterminate"
          label="全选"
          @change="onAllChange"
        />
      </div>
      <div class="header-right">
        <el-popover placement="bottom" width="260">
          <template #reference>
            <el-button type="primary" plain> 操作 </el-button>
          </template>

          <div class="popover-item">
            批量上传：
            <el-button plain @click="handleBatchCreate" :disabled="getTextCheck.length == 0">
              批量上传
            </el-button>
          </div>
          <div class="popover-item">
            删除字符：
            <el-button
              plain
              :icon="Delete"
              @click="hangleBeforeStr"
              :disabled="getTextCheck.length == 0"
            >
              - 前字符
            </el-button>
          </div>
          <div class="popover-item">
            删除字符：
            <el-button
              plain
              :icon="Delete"
              @click="hangleAfterStr"
              :disabled="getTextCheck.length == 0"
            >
              - 后字符
            </el-button>
          </div>

          <div class="popover-item">
            前后空串：
            <el-button
              plain
              :icon="Delete"
              @click="hangleTrimStr"
              :disabled="getTextCheck.length == 0"
            >
              删除
            </el-button>
          </div>

          <div class="popover-item">
            清空所有：
            <el-button plain @click="handleClear"> 清空 </el-button>
          </div>
        </el-popover>

        <el-button type="primary" @click="handleRead"> 读取 </el-button>
      </div>
    </div>
    <div class="text-list">
      <div
        :class="['text-list-item', item.status == 2 && 'is-success']"
        v-for="item in elementList"
        :key="item.id"
        @click.stop="onItemChange(item)"
      >
        <div class="text-item-left">
          <div class="text-list-checkbox">
            <span class="text-list-loading" v-if="item.status == 1">
              <el-icon class="is-loading">
                <Loading />
              </el-icon>
            </span>
            <el-checkbox
              @click.stop
              @change="onItemChange(item)"
              :model-value="textCheckMap[item.id]"
            />
          </div>
          <span>{{ item.text }}</span>
        </div>
        <el-button type="primary" text @click="handleFillContent(item.text)" size="small">
          填充
        </el-button>
      </div>
    </div>

    <c-dialog title="读取剪切板内容" :destroy-on-close="false" :width="600" name="editable-content">
      <el-space class="editable-handle">
        <c-select v-model="editGetType" :filterable="true" :clearable="true" width="160px">
          <el-option :value="0" label="自定义"></el-option>
          <el-option :value="1" label="p标签"></el-option>
          <el-option :value="2" label="span标签"></el-option>
          <el-option :value="3" label="div标签"></el-option>
        </c-select>
        <c-input v-if="editGetType == 0" v-model="editGetInput" placeholder="请输入"></c-input>
      </el-space>
      <div
        id="editable"
        class="read-editable-content"
        contenteditable="true"
        placeholder="请在你想拷贝内容的网页直接选中复制，然后 Ctrl+V 粘贴内容"
        @input="onEditableInput"
      ></div>
      <div class="dialog-footer">
        <el-button plain @click="handleClose"> 取 消 </el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </c-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { Delete, Loading } from '@element-plus/icons-vue';
import { v4 } from 'uuid';

// store modal
import { useModalStore } from '@/pinia/modules/modal';
const modalStore = useModalStore();

const svgStr = `<svg t="1750473304174" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5180" width="64" height="64"><path d="M857.373005 65.290005 469.604424 65.290005c-34.211173 0-62.044078 27.832905-62.044078 62.043055l0 10.340509-63.076594 0c-25.993001 0-48.228421 16.346293-57.001225 39.293935L166.626995 176.967504c-34.21015 0-62.043055 27.832905-62.043055 62.043055l0 657.655358c0 34.21015 27.832905 62.043055 62.043055 62.043055l550.115086 0c34.21015 0 62.043055-27.832905 62.043055-62.043055l0-49.634444 78.587869 0c34.21015 0 62.043055-27.832905 62.043055-62.043055L919.41606 127.33306C919.41606 93.122911 891.583155 65.290005 857.373005 65.290005zM344.483752 179.035606l194.402595 0c10.833743 0 19.646456 8.813736 19.646456 19.646456 0 10.833743-8.813736 19.646456-19.646456 19.646456L344.483752 218.328517c-10.833743 0-19.646456-8.813736-19.646456-19.646456C324.836273 187.849342 333.650009 179.035606 344.483752 179.035606zM737.423099 896.665917c0 11.402701-9.278317 20.681018-20.681018 20.681018L166.626995 917.346935c-11.403724 0-20.681018-9.278317-20.681018-20.681018L145.945977 239.010559c0-11.402701 9.277294-20.681018 20.681018-20.681018l120.111588 0c8.197706 24.02723 30.977525 41.362037 57.744145 41.362037l194.402595 0c26.767644 0 49.54644-17.334807 57.744145-41.362037l120.111588 0c11.402701 0 20.681018 9.278317 20.681018 20.681018L737.422076 896.665917zM878.054023 784.988418c0 11.402701-9.278317 20.681018-20.681018 20.681018l-78.587869 0L778.785136 239.010559c0-34.21015-27.832905-62.043055-62.043055-62.043055L595.886549 176.967504c-8.771781-22.947641-31.007201-39.293935-57.001225-39.293935l-89.963964 0L448.921359 127.33306c0-11.403724 9.278317-20.681018 20.683065-20.681018l387.768581 0c11.402701 0 20.681018 9.277294 20.681018 20.681018L878.054023 784.988418z" fill="#272636" p-id="5181"></path><path d="M620.597347 334.252737 260.748652 334.252737c-11.422144 0-20.681018 9.259898-20.681018 20.681018s9.258874 20.681018 20.681018 20.681018l359.849718 0c11.42112 0 20.681018-9.259898 20.681018-20.681018S632.018467 334.252737 620.597347 334.252737z" fill="#272636" p-id="5182"></path><path d="M620.597347 454.201619 260.748652 454.201619c-11.422144 0-20.681018 9.259898-20.681018 20.681018 0 11.42112 9.258874 20.681018 20.681018 20.681018l359.849718 0c11.42112 0 20.681018-9.259898 20.681018-20.681018C641.278365 463.46254 632.018467 454.201619 620.597347 454.201619z" fill="#272636" p-id="5183"></path><path d="M440.673511 574.151525 260.748652 574.151525c-11.422144 0-20.681018 9.259898-20.681018 20.681018 0 11.42112 9.258874 20.681018 20.681018 20.681018l179.924859 0c11.42112 0 20.681018-9.259898 20.681018-20.681018C461.35453 583.411423 452.093609 574.151525 440.673511 574.151525z" fill="#272636" p-id="5184"></path></svg>`;

const emit = defineEmits(['out-text', 'on-batch']);

const editGetType = ref(1);

const editGetInput = ref('');

const textCheckMap = ref({});

const elementList = ref([]);

const getTextCheck = computed(() => {
  return elementList.value.filter((v) => textCheckMap.value[v.id]);
});

// 是否全选
const isAllChecked = computed(
  () => elementList.value.length > 0 && getTextCheck.value.length === elementList.value.length,
);

// 部分数据勾选状态
const isIndeterminate = computed(() =>
  isAllChecked.value ? false : getTextCheck.value.length > 0,
);

const onEditableInput = (e) => {
  if (e.target.innerText.trim()) {
    e.target.setAttribute('placeholder', '');
  } else {
    e.target.innerHTML = '';
    e.target.setAttribute(
      'placeholder',
      '请在你想拷贝内容的网页直接选中复制，然后 Ctrl+V 粘贴内容',
    );
  }
};

const handleRead = () => {
  modalStore.openModal('editable-content', {});
};

const handleClose = () => {
  modalStore.closeModal('editable-content');
};

const handleSubmit = () => {
  let queryTag = '';

  if (editGetType.value == 0) {
    queryTag = editGetInput.value;
  }

  if (editGetType.value == 1) {
    queryTag = 'p';
  }

  if (editGetType.value == 2) {
    queryTag = 'span';
  }

  if (editGetType.value == 3) {
    queryTag = 'div';
  }

  const element = document.getElementById('editable');
  const textElements = element.querySelectorAll(queryTag);

  let textList = [];
  for (const textEle of textElements) {
    textList.push({ text: textEle.innerText, id: v4() });
  }

  elementList.value = textList.filter((v) => {
    return v.text != '' && v.text != '\n';
  });

  console.log(elementList.value, 'elementList.value');

  handleClose();

  setTimeout(() => {
    onAllChange(true);
  }, 100);
};

const handleBatchCreate = () => {
  console.log(textCheckMap.value, ' textCheckMap');
  emit('on-batch', getTextCheck.value);
};

const onAllChange = (e) => {
  console.log(e, 'e');
  for (const item of elementList.value) {
    textCheckMap.value[item.id] = e;
  }

  console.log(textCheckMap.value, isAllChecked.value, 'textCheckMap.value2');
};

const onItemChange = (item) => {
  textCheckMap.value[item.id] = !textCheckMap.value[item.id];
};

const handleFillContent = (text) => {
  emit('out-text', text);
};

const hangleBeforeStr = () => {
  for (const item of elementList.value) {
    if (textCheckMap.value[item.id]) {
      item.text = item.text.slice(1);
    }
  }
};

const hangleAfterStr = () => {
  for (const item of elementList.value) {
    if (textCheckMap.value[item.id]) {
      item.text = item.text.slice(0, item.text.length - 1);
    }
  }
};

const hangleTrimStr = () => {
  for (const item of elementList.value) {
    if (textCheckMap.value[item.id]) {
      item.text = item.text.trim();
    }
  }
};

const handleClear = () => {
  elementList.value = [];
};
</script>

<style lang="scss" scoped>
.material-read {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.preview-content {
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  box-sizing: border-box;
  overflow-y: auto;
  width: 100%;
  height: 100%;
}

.text-list {
  overflow: auto;
  // border: 1px solid #e6e6e6;
  // box-sizing: border-box;
}

.text-item-left {
  display: flex;
  align-items: center;
}

.text-list-item {
  border-bottom: 1px dashed #e6e6e6;
  padding: 4px 12px;
  box-sizing: border-box;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;

  &:hover {
    background-color: #eee;
  }

  &.is-success {
    background-color: rgba(103, 194, 58, 0.5);
  }
}

.text-list-checkbox {
  margin-right: 10px;
  position: relative;
}

.text-list-loading {
  position: absolute;
  left: -14px;
  top: 50%;
  bottom: 0;
  transform: translateY(-50%);
  line-height: 1;
  z-index: 99;
  height: 12px;
}

.popover-item {
  display: flex;
  align-items: center;
  margin: 10px 0;
}
</style>

<style lang="scss">
.editable-handle {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.read-editable-content {
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  width: 100%;
  position: relative;
  margin: 0 auto;
  padding: 12px;
  box-sizing: border-box;
  height: 460px;
  outline: none;
  overflow: auto;

  &::after {
    content: attr(placeholder);
    color: #999;
  }
}

.read-editable-content p {
  line-height: 2.8 !important;
  // margin: 0 !important;
  font-size: 12px !important;
  position: relative;

  & * {
    font-size: 12px !important;
  }
}
</style>
